<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div,p,ul,li,ol,dt,dd{margin: 0;padding: 0;}
			li{list-style: none;}
			#box{
				width:592px;
				margin: 0 auto;
				-webkit-user-select: none;
			}
			#baidulogo{
				display: block;
				margin: 65px auto 35px;
			}
			.insert{
				width:592px;
				height: 40px;
    			line-height: 40px;
				margin: 0 auto;
				display: -webkit-flex;
			}
			#searchTxt{
				width: 480px;
				height: 20px;
				line-height: 20px;
				border: 1px solid #b8b8b8;
				border-right: 0;
				padding: 9px 7px;
				border-bottom: 1px solid #ccc;
				font: 16px arial;
				outline: none;
				-webkit-appearance: none;
				-webkit-box-shadow: none;
				box-shadow: none;
	
			}
			#searchTxt:focus{
				outline-color: green;
				border: 1px solid  green;
				outline:none;
			}
			#submitBtn{
				width: 108px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background: #1bc550;
				color: #fff;
				border: none;
				outline: none;
				font-size: 16px;
				cursor: pointer;
			}
			#submitBtn:hover{
				background:#49b571;
			}
			#ul{
				width:484px;
				border: 1px solid #ccc;
				border-top: none;
				color: #7A77C8;
			}
			#ul li{
				padding-left: 8px;
				line-height: 30px;
			}
			#ul li:hover{
				background: #e7e7e7;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="https://p.ssl.qhimg.com/t01d1f1a2ae31e3c3e4.png" id="baidulogo" width="240" height="64"/>
			<div class="insert"spellcheck="false">
				<input type="text" name="" id="searchTxt" value="" />
				<input type="submit" name="submitBtn" id="submitBtn" value="搜索" />
			</div>
			<ul id="ul">
						
			</ul>
		</div>
		<script type="text/javascript">
			searchTxt.onkeyup = function(){
				var val = this.value;
			 	var oscript = document.createElement("script");
			 	oscript.src="https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&word="+val
			 	document.body.appendChild(oscript);
			 	oscript.onload = function(){
			 		document.body.removeChild(oscript);
			 	}
			}
			function suggest_so(msg){
				console.log(msg)
				var sArry = msg.s;
				ul.innerHTML=''
				for(var i in sArry){
					//console.log(sArry[i])
					var li = document.createElement('li');
					li.innerHTML = sArry[i];
					ul.appendChild(li);
				}
			}
			ul.onclick = function(e){
				if(e.target.nodeName=="LI")window.open("https://www.so.com/s?q="+e.target.innerHTML)
			}
		</script>
	</body>
</html>
